<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <title>绝对定位的参照系</title>
  <style type="text/css">
    body {
      width: 960px;
      margin: 0 auto;
      font-family: 微软雅黑;
      font-size: 18px;
      line-height: 1.8em;
    }

    div {
      width: 400px;
      float: left;
      margin: 0 20px 0 0
    }

    .absolute {
      position: absolute;
      left: 50px;
    }

    .bg {
      background-color: #fcc;
    }

    code {
      background-color: #ccc;
      height: 50px;
      line-height: 50px;
      display: block;
    }

  </style>
</head>

<body>
  <div>
    <h2>以 body 为参照</h2>
    <p>孩子，你真是快活啊，一早晨坐在泥土里，耍着折下来的小树枝。</p>
    <p>我微笑着看你在那里耍着那根折下来的小树枝。</p>
    <p class="bg absolute">我正忙着算账，一小时一小时在那里加叠数字。</p>
    <p>也许你在看我，想到：“这种好没趣的游戏，竟把你的一早晨的好时间浪费掉了！"</p>
    <p>孩子，我忘了聚精会神玩耍树枝与泥饼的方法了。</p>
    <code>.absolute { position: absolute; left:50px;}
      </code>
  </div>
  <div>
    <div style="position:relative">
      <h2>以父元素为参照</h2>
      <p>孩子，你真是快活啊，一早晨坐在泥土里，耍着折下来的小树枝。</p>
      <p>我微笑着看你在那里耍着那根折下来的小树枝。</p>
      <p class="bg absolute">我正忙着算账，一小时一小时在那里加叠数字。</p>
      <p>也许你在看我，想到：“这种好没趣的游戏，竟把你的一早晨的好时间浪费掉了！"</p>
      <p>孩子，我忘了聚精会神玩耍树枝与泥饼的方法了。</p>
      <code>.absolute { position: absolute; left:50px;}
        </code>
    </div>
  </div>
</body>

</html>
